<template>
	<div class="root">
		<img v-if="!showEyes" class="backimg" src="http://qncdn.tissys.com/img/bj2020100701.jpg" alt="">
		<div v-if="!showEyes" class="container">
			<div class="bgcimage-top"></div>
			<div class="bgcimage-bottom"></div>
			<div class="title"  v-if="liveInfo.com_name.length<=10">{{liveInfo.com_name}}</div>
			<marquee class="title" v-if="liveInfo.com_name.length>10">{{liveInfo.com_name}}</marquee>
			<div class="match_info">{{groundName}} {{groupName}} <span  v-if="count!=1&&count!=0&&count!=2&&stage==1">第一阶段</span><span v-if="count!=1&&count!=0&&count!=2&&stage==2">第二阶段</span> <span v-if="count==0||count==1||count==2">{{wheel}}</span></div>
			<div class="logo1" v-if="logoSrc!==''&&logoSrc!==null">
				<img :src="logoSrc" alt="">
			</div>
			<div class="logo2" v-if="logoSrc1!==''&&logoSrc1!==null">
				<img :src="logoSrc1" alt="">
			</div>
			<div class="ball-box-top">
				<i v-if="eye_a>=4" class="iconfont icon-wenti-wangqiu"></i>
				<i v-if="eye_a>=3" class="iconfont icon-wenti-wangqiu"></i>
				<i v-if="eye_a>=2" class="iconfont icon-wenti-wangqiu"></i>
				<i v-if="eye_a>=1" class="iconfont icon-wenti-wangqiu"></i>
			</div>
			<div class="ball-box-bot">
				<i v-if="eye_b>=4" class="iconfont icon-wenti-wangqiu"></i>
				<i v-if="eye_b>=3" class="iconfont icon-wenti-wangqiu"></i>
				<i v-if="eye_b>=2" class="iconfont icon-wenti-wangqiu"></i>
				<i v-if="eye_b>=1" class="iconfont icon-wenti-wangqiu"></i>
			</div>
			<div class="box1" v-if="one_limit_a!==''&&team_name_a==''&&team_name_b==''">
				<div class="groupname1" v-if="one_limit_a.length<=7">{{one_limit_a}}</div>
				<div class="groupname3" v-if="one_limit_a.length>7"><span class="scroll">{{one_limit_a}}</span></div>
				<div class="groupname2" v-if="one_limit_b.length<=7">{{one_limit_b}}</div>
				<div class="groupname4" v-if="one_limit_b.length>7"><span class="scroll">{{one_limit_b}}</span></div>
			</div>
			<div class="box1" v-if="team_name_a!==''&&team_name_b!==''">
				<div class="groupname1" v-if="team_name_a.length<=7">{{team_name_a}}</div>
				<div class="groupname3" v-if="team_name_a.length>7"><span class="scroll">{{team_name_a}}</span></div>
				<div class="groupname2" v-if="team_name_b.length<=7">{{team_name_b}}</div>
				<div class="groupname4" v-if="team_name_b.length>7"><span class="scroll">{{team_name_b}}</span></div>
			</div>
			<div :class="status==0||status==1?'waiting':status==2?'status1':status==3?'over':status==4?'pause':''">
				<div class="ing"></div><span>{{matchStatus}}</span>
			</div>
			<div class="time">
				<div ><img src="http://qncdn.tissys.com/admin/assets/image/time.png" alt=""><span>{{liveInfo.game_time.split(':')[0]}}:{{liveInfo.game_time.split(':')[1]}}</span></div>
			</div>
			<div class="row1">
				<!-- 单打时上面运动员姓名 -->
				<div class="box name-single" v-if="matchType=='single'&&name_a.length<=4">
					<span class="name_a"><span class="circle" v-if="matchType == 'single'&&user_id_a==serve_user"></span>{{name_a}}</span>
				</div>
				<!-- 名字超长处理 -->
				<div class="box name-single" id="overwidth" v-if="matchType=='single'&&name_a.length>4">
					<div class="name_a"><span class="circle" v-if="matchType == 'single'&&user_id_a==serve_user"></span><span class="name"><span class="scroll">{{name_a}}</span></span></div>
				</div>
				<!-- 双打时上面运动员姓名 -->
				<div class="box name-double" v-if="matchType=='double'">
					<div class="name_a" :id="name_a.length>4?'overwidth1':''"><span class="circle" v-if="matchType == 'double'&&user_id_a==serve_user"></span><span class="name"><span class="scroll">{{name_a}}</span></span></div>
					<div class="name_b" :id="name_b.length>4?'overwidth1':''"><span class="circle" v-if="matchType == 'double'&&user_id_b==serve_user"></span><span class="name"><span class="scroll">{{name_b}}</span></span></div>
				</div>
				<!-- 第一列 一盘时为空 两盘时为空 三盘时为比分1-->
				<div class="box num">{{roundnum>2?roundList[0].top:''}}<span class="dotnum" v-if="roundList[0].top==6">{{roundnum>2?roundList[0].tiebreak:''}}</span></div>
				<!-- 第二列 一盘时为空 两盘时为比分1 三盘时为比分2-->
				<div class="box num">{{roundnum==2?roundList[0].top:roundnum==3?roundList[1].top:''}}<span class="dotnum" v-if="roundList[0].top==6">{{roundnum==2?roundList[0].tiebreak:roundnum==3?roundList[1].tiebreak:''}}</span></div>
				<!-- 第三列 一盘时为比分1 两盘时为比分2 三盘时为比分3-->
				<div class="box num">{{roundnum==1?roundList[0].top:roundnum==2?roundList[1].top:roundnum==3?roundList[2].top:''}}<span class="dotnum" v-if="roundList[0].top==6">{{roundnum==1?roundList[0].tiebreak:roundnum==2?roundList[1].tiebreak:roundnum==3?roundList[2].tiebreak:''}}</span></div>
				<!-- 第四列 固定不变 -->
				<div class="box num score">{{roundList[roundnum].top}}</div>
			</div>
			<div class="row2">
				<!-- 单打时下面运动员姓名 -->
				<div class="box name-single" v-if="matchType=='single'&&name_b.length<=4">
					<span class="name_b"><span class="circle" v-if="matchType == 'single'&&user_id_b==serve_user"></span>{{name_b}}</span>
				</div>
				<!-- 单打名字超长处理 -->
				<div class="box name-single" id="overwidth" v-if="matchType=='single'&&name_b.length>4">
					<div class="name_b"><span class="circle" v-if="matchType == 'single'&&user_id_b==serve_user"></span><span class="name"><span class="scroll">{{name_b}}</span></span></div>
				</div>
				<!-- 双打时下面运动员姓名 v-if="matchType == 'double'&&user_id_c==serve_user"-->
				<div class="box name-double" v-if="matchType=='double'">
					<div class="name_c" :id="name_c.length>4?'overwidth1':''"><span class="circle" v-if="matchType == 'double'&&user_id_c==serve_user"></span><span class="name"><span class="scroll">{{name_c}}</span></span></div>
					<div class="name_d" :id="name_d.length>4?'overwidth1':''"><span class="circle" v-if="matchType == 'double'&&user_id_d==serve_user"></span><span class="name"><span class="scroll">{{name_d}}</span></span></div>
				</div>
				<!-- 第一列 一盘时为空 两盘时为空 三盘时为比分1-->
				<div class="box num">{{roundnum>2?roundList[0].bot:''}}<span class="dotnum" v-if="roundList[0].bot==6">{{roundnum>2?roundList[0].tiebreak:''}}</span></div>
				<!-- 第二列 一盘时为空 两盘时为比分1 三盘时为比分2-->
				<div class="box num">{{roundnum==2?roundList[0].bot:roundnum==3?roundList[1].bot:''}}<span class="dotnum" v-if="roundList[0].bot==6">{{roundnum==2?roundList[0].tiebreak:roundnum==3?roundList[1].tiebreak:''}}</span></div>
				<!-- 第三列 一盘时为比分1 两盘时为比分2 三盘时为比分3-->
				<div class="box num">{{roundnum==1?roundList[0].bot:roundnum==2?roundList[1].bot:roundnum==3?roundList[2].bot:''}}<span class="dotnum" v-if="roundList[0].bot==6">{{roundnum==1?roundList[0].tiebreak:roundnum==2?roundList[1].tiebreak:roundnum==3?roundList[2].tiebreak:''}}</span></div>
				<!-- 第四列 固定不变 -->
				<div class="box num score">{{roundList[roundnum].bot}}</div>
			</div>
		</div>
		<iframe v-if="showIframe" :src="liveInfo.eyes.url" frameborder="0" style="width: 100vw;height: 100vh;position: absolute;left: 0;top: 0;z-index: 999;"></iframe>
	</div>
</template>

<script>
export default {
	data(){
		return{
			liveInfo: {},
			show: null,
			matchType:"",
			matchName:"",
			logoSrc:"",
			systemName:"TISSYS网球智能服务系统",
			matchStatus:"",
			gameTime:"",
			plateList:[],
			roundList:[],
			groupName:"",
			groundName:"",
			siteNumber:1,
			stage:"",
			wheel:"",
			wheelList:[],
			name_a:"",
			name_b:"",
			name_c:"",
			name_d:"",
			one_limit_a:"",
			one_limit_b:"",
			team_name_a:"",
			team_name_b:"",
			user_id_a:"",
			user_id_b:"",
			user_id_c:"",
			user_id_d:"",
			serve_user:"",
			roundnum:0,
			status:null, //比赛状态
			logoSrc1:'' ,//第二个比赛logo
			eye_a:0,
			eye_b:0,
			count:'',
			showEyes:false,
			showIframe:false
		}
	},
	created() {
		this.led_info()
	},
	filters: {
		teams(site) {
			return site.split(',')[0]
		},
	},
	methods:{
		led_info() {
			this.show = true
			this.$axios.post('LedShow/every_ground_led', {
				com_id: this.$route.query.com_id,
				ground_name: this.$route.query.ground_name,
				mark: this.$route.query.mark,
				time: this.$route.query.time,
			}, {
				headers: {
					token: window.sessionStorage.getItem('token')
				}
			}).then(res => {
				setTimeout(() => {
					if (res.data.code == 2000) {
						this.plateList=[];
						this.show = true
						this.liveInfo = res.data.data
						console.log(this.liveInfo.eyes?'有鹰眼':'无鹰眼')
						if(this.liveInfo.eyes){
							this.url = this.liveInfo.eyes.url
							this.showIframe = true
							setTimeout(()=>{
								this.showEyes = true
							},2000)
							setTimeout(()=>{
								this.url = ''
								this.showEyes = false
								this.showIframe=false
							},12000)
						}
						if(this.liveInfo.clash_info.user_id_a.indexOf(",")==-1){//判断单双打
							this.matchType="single";
						}else{
							this.matchType="double";
						}
						// 初始化运动员姓名和id
						if(this.matchType=="single"){
							this.name_a=this.liveInfo.clash_info.name_a;
							this.name_b=this.liveInfo.clash_info.name_b;
							this.user_id_a=this.liveInfo.clash_info.user_id_a;
							this.user_id_b=this.liveInfo.clash_info.user_id_b;
						}else{
							this.name_a=this.liveInfo.clash_info.name_a.split("/")[0];
							this.name_b=this.liveInfo.clash_info.name_a.split("/")[1];
							this.name_c=this.liveInfo.clash_info.name_b.split("/")[0];
							this.name_d=this.liveInfo.clash_info.name_b.split("/")[1];
							this.user_id_a=this.liveInfo.clash_info.user_id_a.split(",")[0];
							this.user_id_b=this.liveInfo.clash_info.user_id_a.split(",")[1];
							this.user_id_c=this.liveInfo.clash_info.user_id_b.split(",")[0];
							this.user_id_d=this.liveInfo.clash_info.user_id_b.split(",")[1];
						}
						// 比赛logo
						this.logoSrc=this.liveInfo.com_logo;
						this.logoSrc1=this.liveInfo.com_logo_two==undefined?'':this.liveInfo.com_logo_two;
						// 比赛名称
						this.matchName=this.liveInfo.com_name;
						// 判断比赛的状态
						if(this.liveInfo.status===0||this.liveInfo.status===1){
							this.matchStatus="即将开始";
						}else if(this.liveInfo.status===2){
							this.matchStatus="进行中";
						}else if(this.liveInfo.status===3){
							this.matchStatus="已结束";
						}else if(this.liveInfo.status===4){
							this.matchStatus="比赛暂停";
						}
						this.status = this.liveInfo.status
						// 比赛用时
						this.gameTime=this.liveInfo.game_time;
						// 比赛场地
						this.groupName=this.liveInfo.group_name
						this.groundName=this.liveInfo.ground_name
						this.siteNumber=this.liveInfo.site.split(",")[0];
						// 球数
						this.eye_a=this.liveInfo.eye_a
						this.eye_b=this.liveInfo.eye_b
						// 盘数
						var arr = this.liveInfo.round_num;
						this.roundnum = arr.length;
						// console.log(this.roundList)
						for(var i=0;i<arr.length;i++){
							this.plateList.push(i+1);
						}
						this.plateList.push("Pts");
						// 比分
						this.roundList=this.liveInfo.round_num;
						this.roundList.push({
							top:this.liveInfo.score_num.split(":")[0],
							bot:this.liveInfo.score_num.split(":")[1],
							tiebreak:"",
						});
						// 运动员单位
						if(this.liveInfo.clash_info.one_limit_a!==null){
							this.one_limit_a=this.liveInfo.clash_info.one_limit_a.split('/').toString()
						}
						if(this.liveInfo.clash_info.one_limit_b!==null){
							this.one_limit_b=this.liveInfo.clash_info.one_limit_b.split('/').toString()
						}
						
						// 运动员上级单位
						if(this.liveInfo.clash_info.team_name_a!==null){
							this.team_name_a=this.liveInfo.clash_info.team_name_a
						}
						if(this.liveInfo.clash_info.team_name_b!==null){
							this.team_name_b=this.liveInfo.clash_info.team_name_b
						}
						// console.log(this.matchType,this.serve_user,this.user_id_a,this.user_id_b,this.user_id_c,this.user_id_d)
						// 发球人
						this.serve_user=this.liveInfo.serve_user;
						// 阶段和轮次
						if(this.liveInfo.com_system===1||this.liveInfo.com_system===4){//1和4才有阶段
							this.stage=this.liveInfo.stage;
							if(this.stage==="1"){
								this.stage="第一阶段";
							}else if(this.stage==="2"){
								this.stage="第二阶段";
							}
						}
						/**
						 * 用wheel_number-wheel，结果=0的时候阶段轮次显示为决赛、
						 * 结果=1的时候阶段轮次显示为半决赛、结果=2的时候阶段轮次显示为1/4决赛
						 * */
						// this.wheel="第"+this.liveInfo.wheel+"轮";
						let wheel = this.liveInfo.wheel
						let wheel_number = this.liveInfo.wheel_number
						this.count = wheel_number - wheel
						if(this.count==0){
							this.wheel = "决赛"
						}else{
							if(this.count==1){
								this.wheel = "半决赛"
							}else{
								if(this.count==2){
									this.wheel = "1/4决赛"
								}else{
									this.wheel="第"+wheel+"轮"
								}
							}
						}
					} else {
						this.show = false
					}
					this.led_info()
				}, 1000)
			}).catch(res => {
				console.log(res)
			})
		}
	}
}
</script>

<style scoped lang="less">
.root{
	position: relative;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	@keyframes wordsLoop {
	    0% {
	        transform: translateX(600px);
	        -webkit-transform: translateX(600px);
	    }
	    100% {
	        transform: translateX(-150%);
	        -webkit-transform: translateX(-150%);
	    }
	}
	 
	@keyframes namesLoop {
	    0% {
	        transform: translateX(40%);
	        -webkit-transform: translateX(40%);
	    }
	    100% {
	        transform: translateX(-100%);
	        -webkit-transform: translateX(-100%);
	    }
	}
	.backimg{
		position: absolute;
		z-index: -1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.container{
		font-size: 90px;
		color: #fff;
		width: 90vw;
		height: 900px;
		// background-image: url("http://qncdn.tissys.com/admin/assets/backgroundimage.png");
		// background: url(http://qncdn.tissys.com/img/bj2020100703.png);
		background-size: 100%;
		position: relative;
		.bgcimage-top{
		position: absolute;
		left: 0;
		right: 0;
		top: 25.3%;
		width: 100%;
		height: 10vh;
		background-image: url("http://qncdn.tissys.com/led_backfround.png");
		background-repeat: no-repeat;
		background-size: 100%;
		}
		.bgcimage-bottom{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 4%;
		width: 100%;
		min-height: 10vh;
		background-image: url("http://qncdn.tissys.com/led_backfround.png");
		background-repeat: no-repeat;
		background-position: 0 -43.5vw;
		background-size: 100%;
		}
		// 球
		.ball-box-top,.ball-box-bot{
			width: 200px;
			height: 50px;
			position: absolute;
			top: 245px;
			left: 545px;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			.iconfont{
				font-size: 50px;
				color: #CDDC37;
			}
			// img{
			// 	width:55px;
			// 	height:55px;
			// }
		}
		.ball-box-bot{
			top: 790px;
		}
		.logo1,.logo2{
			width: 100px;
			height: 100px;
			background: #fff;
			position: absolute;
			top: 120px;
			img{
				width: 100%;
				height: 100%;
			}
		}
		.logo1{
			left: 0;
		}
		.logo2{
			right:0;
		}
		.title{
			width: 100%;
			height: 120px;
			text-align: center;
			font-size: 65px;
			// animation: 20s wordsLoop infinite;
		}
		.match_info{
			width: 100%;
			text-align: center;
			font-size: 48px;
			color: #65b17b;
		}
		.groupname1,.groupname2,.groupname3,.groupname4{
			width: 540px;
			height: 90px;
			font-size: 60px;
			line-height: 90px;
			font-weight: 700;
			color: #fda800;
			position: absolute;
			left: 0;
			text-align: left;
			box-sizing: border-box;
			padding-left: 78px;
			overflow: hidden!important;
		}
		.groupname1{
			top: 230px;
		}
		.groupname2{
			bottom: 45px;
		}
		.groupname3{
			top: 230px;
			.scroll{
				width: 640px;
				height: 90px;
				position: absolute;
				text-align: center;
				animation: 20s wordsLoop linear infinite normal;
			}
		}
		.groupname4{
			bottom: 45px;
			.scroll{
				width: 1000px;
				height: 90px;
				position: absolute;
				text-align: center;
				animation: 20s wordsLoop linear infinite normal;
			}
		}
		.row1,.row2{
			width: 100%;
			height: 210px;
			position: absolute;
			left: 0;
			display: flex;
			justify-content: space-around;
			.box{
				width: 200px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.score{
				color: #fda800!important;
				letter-spacing: -15px;
				background-color: #11454e;
				flex-grow: 0;
				flex-shrink: 0;
			}
			.num{
				font-size:180px;
				margin-left:4px;
				font-weight: 700;
				color: #f8fd53;
				position: relative;
				background-color: #11454e;
				flex-grow: 0;
				flex-shrink: 0;
				.dotnum{
					position: absolute;
					top: -5px;
					right: 0;
					font-size: 100px;
					font-weight: 700;
					color: #f8fd53;
				}
			}
			.name-single,.name-double{
				width: 30vw;
				font-size: 80px;
				font-weight: 700;
				height: 210px;
				// tips
				flex-grow: 1;
				background-color: #11454e;
			}
			.name-single{
				.name_a,.name_b{
					display: block;
					width: 100%;
					height: 50%;
					font-size: 70px;
					text-align: left;
					padding-left: 78px;
					box-sizing: border-box;
					position: relative;
					.circle{
						display: inline-block;
						width: 50px;
						height: 50px;
						border-radius: 30px;
						background: #fda800;
						position: absolute;
						bottom: 0;
						transform: translateY(-50%);
						left: 10px;
					}
				}
			}
			.name-double{
				display: flex;
				flex-direction: column;
				.name_a,.name_b,.name_c,.name_d{
					box-sizing: border-box;
					display: block;
					width: 100%;
					height: 50%;
					font-size: 60px;
					// tips
					text-align: left;
					padding-left: 78px;
					box-sizing: border-box;
					position: relative;
					line-height: 100px;
					
					.circle{
						display: inline-block;
						width: 50px;
						height: 50px;
						border-radius: 30px;
						background: #fda800;
						position: absolute;
						bottom: 0;
						transform: translateY(-50%);
						left: 10px;
					}
				}
			}
			
		}
		.row1{
			top:330px;
		}
		.row2{
			bottom: 140px;
		}
		.status1,.waiting,.over,.pause{
			position: absolute;
			// tips
			z-index: 10;
			top: 210px;
			right: 200px;
			.ing,span{
				display: inline-block;
				vertical-align: middle;
			}
			.ing{
				margin-right: 15px;
				width: 35px;
				height: 35px;
				background-color: #f8fd53;
			}
			span{
				font-size: 40px;
				color: #f8fd53;
			}
		}
		// 即将开始
		.waiting{
			.ing{
				background-color: #fda800;
			}
			span{
				color:#fda800;
			}
		}
		// over 已结束
		.over{
			.ing{
				background-color: #f40;
			}
			span{
				color: #f40!important;
			}
		}
		// 暂停中
		.pause{
			.ing{
				background-color: #fda800;
			}
			span{
				color:#fda800;
			}
		}
		.time{
			position: absolute;
			top: 250px;
			right: 20px;
			font-size: 40px;
			img{
				width: 35px;
				margin-right: 10px;
			}
		}
		#overwidth1,#overwidth{
			text-align: right;
			position: relative;
			.name{
				width: 250px;
				height: 100%;
				overflow: hidden!important;
				position: absolute;
				right: 30px;
				bottom: 0;
				.clear{
					width: 285;
					height: 80px;
					display: block;
					background: transparent;
				}
				span{
					width:800px;
					height: 80px;
					position: absolute;
					text-align: center;
					animation: 15s namesLoop linear infinite normal;
				}
			}
		}
	}
}
</style>
